<template>
	<view :class="themeName">
		<view class="center-box p-20">
			<view class="box-item now-location p-20">
				<view class="flex row-between">
					<view class="decs">{{$zhTran('当前位置')}}</view>
					<view class="change-leader" @click="chooseLocation">{{$zhTran('修改位置')}}</view>
				</view>
				<view class="flex row-left m-t-20">
					<u-icon name="map" size="30" color="rgba(105, 193, 103, 1)" />
					<text>{{now_address}}</text>
				</view>
			</view>

			<view class="m-t-20" style="color: rgba(166, 166, 166, 1);font-size: 24rpx;">
				{{$zhTran('您附近有'+leaderLength+'位团长')}}
			</view>
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('附近暂无团长~'),
				  	fixed: true
				  } 
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">

				<view class="box-item leader-info m-t-20" v-for="item,idx in leaderList" :key="idx">
					<view class="flex p-20" @click="showDetail(item)">
						<view class="avatar m-r-20">
							<u-image width="100rpx" height="100rpx" border-radius="50%"
								:src="$getImageUri(item.avatar)" />
						</view>
						<view class="info">
							<view class="name flex row-between">
								<text>{{item.name}}</text>
								<view class="distance">{{item.distance}} ></view>
							</view>
							<view>{{$zhTran('联系电话: ')}}{{item.phone}}</view>
							<view>{{$zhTran('提货地址: ')}}{{item.pick_address}}</view>
						</view>
					</view>
					<view class="flex row-between p-20 u-border-top">
						<view class="flex row-left" v-if="item.def_leader">
							<view class="change-leader flex col--center">
								<u-icon name="account-fill" size="30" color="rgba(74, 25, 0, 1)" class="m-r-5" />
								<text>{{$zhTran('默认团长')}}</text>
							</view>
							<view class="change-leader m-l-10" @click="chooseLeader(item.id)">{{$zhTran('切换团长')}}</view>
						</view>
						<view class="flex row-left" v-else>
							<view class="change-leader change-def m-r-10" @click="setDef(item.id)">{{$zhTran('设为默认')}}
							</view>
							<view class="change-leader" @click="chooseLeader(item.id)">{{$zhTran('切换团长')}}</view>
						</view>
						<view class="detail" @click="toLeaderAct(item.id)">{{$zhTran('查看活动 >')}}</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<u-popup v-model="showVisible" mode="center" width="90%">
			<view class="leader-detail p-40">
				<view class="head flex row-center m-b-30">{{$zhTran('团长信息')}}</view>
				<view class="body">
					<view class="title">{{$zhTran('团长名称')}}</view>
					<view class="content u-border-bottom">{{leaderDetail.name}}</view>
					<view class="title">{{$zhTran('联系电话')}}</view>
					<view class="content u-border-bottom">{{leaderDetail.phone}}</view>
					<view class="title">{{$zhTran('所在地区')}}</view>
					<view class="content u-border-bottom">{{leaderDetail.region}}</view>
					<view class="title">{{$zhTran('所在小区')}}</view>
					<view class="content u-border-bottom">{{leaderDetail.community}}</view>
					<view class="title">{{$zhTran('提货地址')}}</view>
					<view class="content u-border-bottom">{{leaderDetail.address}}</view>
				</view>
				<view class="flex row-center m-t-30">
					<u-icon name="close-circle-fill" size="78" color="rgba(255, 208, 0, 1)" @click="closeDetail" />
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script type="text/javascript">
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		location_key
	} from "@/config/app";
	import {
		apiCommunityGroupPurchaseSetDefLeader,
		apiCommunityGroupPurchaseNearLeaderList,
	} from "@/api/community_group_purchase"
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	export default {
		mixins: [MescrollMixin],
		props: {},
		data() {
			return {
				actList: [],
				location: {}, // 我的位置
				now_address: '',
				authLocation: 0,
				leaderList: [],
				leaderDetail: {},
				showVisible: false,
				chooseLocationFlag: 0,
				cgp_id: '',
				from: ''
			}
		},
		methods: {
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCommunityGroupPurchaseNearLeaderList({
					location: this.location,
					mapkey: location_key,
					authLocation: this.authLocation,
					cgp_id: this.cgp_id,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					count,
					address
				}) => {
					if (num === 1) this.leaderList = []
					if (num === 1) this.now_address = this.$zhTran(address)

					this.leaderList = [...this.leaderList, ...lists]
					this.leaderList = this.$zhTran(this.leaderList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.$toast({
						title: this.$zhTran(err)
					})
					this.mescroll.endErr()
				})
			},
			showDetail(row) {
				this.leaderDetail = row
				this.showVisible = true
			},
			closeDetail() {
				this.leaderDetail = {}
				this.showVisible = false
			},
			setDef(id) {
				apiCommunityGroupPurchaseSetDefLeader({
					leader_id: id,
				}).then(() => {
					setTimeout(() => {
						this.mescroll.resetUpScroll()
					}, 200)
				})
			},
			toLeaderAct(id) {
				this.$Router.push({
					path: "/bundle2/pages/community_group_purchase/user/leader_activity",
					query: {
						leader_id: id,
					},
				});
			},
			chooseLeader(id) {
				if (this.from == 'act_detail') {
					this.$Router.replace({
						path: "/bundle2/pages/community_group_purchase/user/activity_detail",
						query: {
							cgp_id: this.cgp_id,
							leader_id: id
						},
					});
				} else {
					this.$Router.replaceAll({
						path: "/bundle2/pages/community_group_purchase/user/user_center",
						query: {
							leader_id: id,
						},
					});
				}
			},
			// 获取位置
			async getLocation() {
				const [error, data] = await uni.getLocation({
					type: 'gcj02'
				})
				// #ifdef MP
				if (!data) return this.getAuthorize(1)
				// #endif
				// #ifdef APP-PLUS
				if (!data) return this.$toast({
					title: this.$zhTran('获取位置失败')
				})
				// #endif
				return {
					latitude: data.latitude,
					longitude: data.longitude
				}
			},

			//选择位置
			async chooseLocation() {
				this.chooseLocationFlag = 1
				const [error, data] = await uni.chooseLocation(this.location)
				console.log('error', error)
				console.log('data', data)
				if (error != null && error.errMsg ==
					'chooseLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json'
				) {
					uni.showModal({
						title: this.$zhTran('提示'),
						content: this.$zhTran('请联系管理员开通地图选址的相关接口')
					})
					return false
				}

				this.now_address = this.$zhTran(data.address)

				this.location = {
					latitude: data.latitude,
					longitude: data.longitude
				}
				setTimeout(() => {
					this.mescroll.resetUpScroll()
					this.chooseLocationFlag = 0
				}, 200)
			},

			// 位置授权
			async getAuthorize(type) {
				const [error, data] = await uni.showModal({
					title: this.$zhTran('您已拒绝地理位置权限'),
					content: this.$zhTran('是否进入权限管理，调整授权？')
				})

				if (data.confirm) {
					const [error, data] = await uni.openSetting()
					if (data) {
						type == 1 && this.getLocation()
						type == 2 && this.chooseLocation()
					}
				} else if (data.cancel) {
					this.$Router.back()
				}
			}
		},
		computed: {
			leaderLength() {
				return this.leaderList.length
			}
		},
		async onShow() {
			try {
				if (this.authLocation && !this.chooseLocationFlag) {
					const data = await this.getLocation()
					if (!data) throw new Error(this.$zhTran('位置获取失败'))
					this.location = data
				}

				// 防止获取不到mescroll
				setTimeout(() => {
					this.mescroll.resetUpScroll()
				}, 200)
			} catch (err) {
				console.log(err)
				this.$toast({
					title: err.message
				})
			}
		},

		onLoad() {
			const options = this.$Route.query;
			this.cgp_id = options.cgp_id ?? '';
			this.from = options.from ?? ''

			var that = this
			uni.getSetting({
				success(res) {
					console.log('authSetting', res.authSetting)
					var authLocation = 0
					if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
							'scope.userLocation']) {
						authLocation = 1
					}
					that.authLocation = authLocation
				}
			})
		},
	};
</script>

<style lang="scss" scoped>
	.center-box {

		.box-item {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.change-leader {
			background-color: rgba(255, 208, 0, 1);
			color: rgba(74, 25, 0, 1);
			font-size: 24rpx;
			padding: 10rpx 18rpx;
			border-radius: 6rpx;
		}

		.now-location {

			.decs {
				font-weight: bold;
			}
		}

		.leader-info {

			.info {
				width: calc(100% - 100rpx);
				color: rgba(56, 56, 56, 1);
				font-size: 24rpx;

				&>view {
					margin-bottom: 10rpx;
				}

				.name {
					color: rgba(38, 38, 38, 1);
					font-size: 28rpx;
					font-weight: bold;

					.distance {
						color: rgba(166, 166, 166, 1);
						font-size: 24rpx;
						font-weight: normal;
					}
				}
			}

			.change-def {
				background-color: rgba(238, 238, 239, 1);
			}

			.detail {
				color: rgba(166, 166, 166, 1);
				font-size: 26rpx;
			}
		}
	}

	.leader-detail {
		background-color: #fff;
		border-radius: 10rpx;

		.head {
			font-weight: bold;
			font-size: 32rpx;
		}

		.title {
			font-size: 28rpx;
			color: rgba(38, 38, 38, 1);
			padding: 0 20rpx;
			margin-top: 20rpx;
		}

		.content {
			font-size: 28rpx;
			color: rgba(153, 153, 153, 1);
			padding: 20rpx;
		}

	}
</style>